<template>
  <Header style="background-color: #242731">
    <Menu mode="horizontal" theme="dark" active-name="1" style="background-color: #242731">
      <div class="layout-logo">系统监控管理系统</div>
      <div class="layout-nav">
        <MenuItem name="userInfo">
          <Icon type="md-person" />
          <span>{{currentUser.realName}}</span>
        </MenuItem>
        <Submenu name="settings">
          <template slot="title">
            <Icon type="md-settings" />
            <span>设置</span>
          </template>
          <MenuItem name="updatePassword" @click.native="updatePassword">修改密码</MenuItem>
          <MenuItem name="logout" @click.native="loginOut">退出登录</MenuItem>
        </Submenu>
      </div>
    </Menu>

    <Modal v-model="upPassword.isShow" title="修改密码" :mask-closable="false" width="400">
      <Form ref="passWordValidate" :model="upPassword.parameters" :rules="upPassword.ruleValidate" label-position="right" :label-width="85" inline>
        <FormItem label="密码:" prop="password">
          <Input v-model="upPassword.parameters.password" type="password" style="width: 200px"  placeholder="请输入..." />
        </FormItem>
        <FormItem label="新密码:" prop="newPassword">
          <Input v-model="upPassword.parameters.newPassword" type="password" style="width: 200px" placeholder="请输入..." />
        </FormItem>
        <FormItem label="确认密码:" prop="newPassword2">
          <Input v-model="upPassword.parameters.newPassword2" type="password" style="width: 200px"  placeholder="请输入..." />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" :loading="upPassword.loading" @click="sendPassword">提交</Button>
      </div>
    </Modal>
  </Header>
</template>

<script>
  import {loginOut,updatePassword,getCurrentBasicUserInfo} from "../../api/sys/system/sysUser";
  import {removeToken} from "../../utils/auth";
  import {mapState,mapMutations} from "vuex";

  export default {
    computed: {
      ...mapState([
        "currentUser"
      ])
    },
    data (){
      return {
        onlineTm : 0,
        upPassword : {
          isShow : false,
          loading : false,
          parameters : {
            password : '',
            newPassword : '',
            newPassword2 : ''
          },
          ruleValidate : {
            password : { required: true, message: '请填写密码！', trigger: 'change' },
            newPassword : [
              { required: true, message: '请填写新密码！', trigger: 'change' },
              { type: 'string', min: 6, message: '密码最少为六位！', trigger: 'change' }
            ],
            newPassword2 : [
              { required: true, message: '必填！', trigger: 'change' },
              { type: 'string', min: 6, message: '密码最少为六位！', trigger: 'change' },
              { validator : (rule,value,callback) =>{
                  if(!value){
                    return callback("请填写确认新密码！");
                  }else if(value != this.upPassword.parameters.newPassword){
                    return callback("请确认新密码不同！");
                  }else{
                    return callback();
                  }
                }, trigger: 'change' }
            ],
          }
        }
      }
    },
    components : {
    },
    created(){
      this.getUserInfo();
    },
    methods : {
      ...mapMutations([
        'setCurrentUser'
      ]),
      sendPassword(){
        this.$refs['passWordValidate'].validate(valid=>{
          this.upPassword.loading = true;
          if(valid){
            updatePassword(this.upPassword.parameters).then(result =>{
              this.upPassword.loading = false;
              this.upPassword.isShow = false;
              this.$Message.info("修改成功！")
            },error =>{
              this.upPassword.loading = false;
            });
          }else{
            this.upPassword.loading = false;
          }
        });
      },
      updatePassword(){
        this.upPassword.isShow = true;
        this.$refs['passWordValidate'].resetFields();
      },
      getUserInfo(){
        getCurrentBasicUserInfo().then(data =>{
          this.userInfo = data.data;
          this.setCurrentUser(this.userInfo);
        });
      },
      loginOut(){
        loginOut().then(data=>{
          //清除Cookie
          removeToken();
          this.$router.push("/");
          this.$store.commit("logOut");
        })
      }
    },
  }
</script>

<style scoped>
  .layout-logo{
    width: 260px;
    height: 45px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 10px;
    left: 20px;
    text-align: center;
    line-height: 45px;
    font-size: 31px;
    color: #FFFFFF
  }
  .layout-nav{
    width: 228px;
    margin: 0 auto;
    margin-right: 0px;
  }

  .layout-operation{
    float: left;
    position: relative;
    left: 200px;
  }
  .layout-operation button{
    height: 42px;
    font-size: 18px;
  }
</style>
